<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()
const username = ref('')
const password = ref('')
const confirmPassword = ref('')
const loading = ref(false)

const handleRegister = async () => {
  if (!username.value || !password.value) {
    ElMessage.error('请输入用户名和密码')
    return
  }

  if (password.value !== confirmPassword.value) {
    ElMessage.error('两次输入的密码不一致')
    return
  }

  loading.value = true
  try {
    const response = await fetch( `http://localhost:8080/ai/register?username=${encodeURIComponent(username.value)}&password=${encodeURIComponent(password.value)}`,
      { method: 'POST' }
    )

    const text = await response.text()
    let data
    try {
      data = JSON.parse(text)
    } catch {
      data = { message: text }
    }
    
    console.log('注册响应:', data, '消息内容:', data.code ,'类型:', typeof data.message)
    if(data.message === 'OK'){
        ElMessage.success('注册成功')
        router.push('/login')
      }else{
        ElMessage.error(data.message || '注册失败')
    }
  } catch (error) {
    ElMessage.error('请求失败，请检查网络')
    console.error('注册错误:', error)
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <div class="login-container">
    <div class="login-box">
      <div class="logo">
        <h1>AI智能应用</h1>
        <p>创建您的账户</p>
      </div>

      <el-form @submit.prevent="handleRegister" class="login-form" :model="{}">
        <el-form-item>
          <el-input
            v-model="username"
            placeholder="请输入用户名"
            prefix-icon="User"
            clearable
          />
        </el-form-item>

        <el-form-item>
          <el-input
            v-model="password"
            type="password"
            placeholder="请输入密码"
            prefix-icon="Lock"
            show-password
          />
        </el-form-item>

        <el-form-item>
          <el-input
            v-model="confirmPassword"
            type="password"
            placeholder="请确认密码"
            prefix-icon="Lock"
            show-password
          />
        </el-form-item>

        <el-button
          type="primary"
          class="login-btn"
          @click="handleRegister"
          :loading="loading"
          :disabled="loading"
        >
          {{ loading ? '注册中...' : '注册' }}
        </el-button>
      </el-form>

      <div class="extra-links">
        <a href="/login">已有账号？去登录</a>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  padding: 1rem;

  @keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
}

.login-box {
  width: 100%;
  max-width: 420px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  backdrop-filter: blur(10px);
  transition: transform 0.3s ease;

  &:hover {
    transform: translateY(-5px);
  }
}

.logo {
  text-align: center;
  padding: 2.5rem 2rem 1.5rem;
  background: linear-gradient(to right, #4b6cb7, #182848);
  color: white;

  h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    letter-spacing: 1px;
  }

  p {
    opacity: 0.9;
    font-size: 1rem;
  }
}

.login-form {
  padding: 2rem;

  :deep(.el-form-item) {
    margin-bottom: 1.5rem;
  }

  :deep(.el-input__wrapper) {
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;

    &:hover {
      box-shadow: 0 0 0 2px #4b6cb7 !important;
    }

    &:focus {
      box-shadow: 0 0 0 3px rgba(75, 108, 183, 0.2) !important;
    }
  }

  .login-btn {
    width: 100%;
    padding: 0.9rem;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: linear-gradient(to right, #4b6cb7, #182848);
    border: none;

    &:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(75, 108, 183, 0.4);
    }
  }
}

.extra-links {
  display: flex;
  justify-content: space-between;
  padding: 0 2rem 1.5rem;
  color: #666;

  a {
    color: #4b6cb7;
    text-decoration: none;
    transition: color 0.3s ease;

    &:hover {
      color: #182848;
      text-decoration: underline;
    }
  }
}
</style>